<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>发布新计划</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
    <script type="text/javascript" src="layuiadmin/layui/layui.all.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <!--<link href="layuiadmin/layui/css/layui.css" rel="stylesheet" type="text/css"/>-->
    <!-- <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="external nofollow" >
    <script src="${pageContext.request.contextPath}/js/layui.js" ></script> -->
</head>
<body>
<div style="padding: 20px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="example">
                        <div class="grid-demo grid-demo-bg1">
                            <label class="layui-form-label">招卖料品名</label>
                            <div class="layui-input-block">
                                <select id="otype" name="inventoryName" class="select" lay-filter="test"
                                        lay-verify="required"
                                        lay-search="" aria-invalid="false">
                                    <option value="">请选择招卖料品名称</option>
                                </select>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">需求规格</label>
                                <div class="layui-input-block">
                                    <input type="text" name="planNum" lay-verify="required" autocomplete="off"
                                           placeholder="请输入" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">单选框</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="sex" value="标准模式" title="标准模式" checked="">
                                    <input type="radio" name="sex" value="定时模式" title="定时模式">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">结束日期</label>
                                <div class="layui-input-block">
                                    <input type="text" name="endTime" id="date1" placeholder="yyyy-MM-dd"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">备注信息</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入内容" name="text" class="layui-textarea"></textarea>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">是否允许跟单</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="isFollow" lay-skin="switch" lay-text="ON|OFF" checked>
                                </div>
                            </div>


                            <!-- style="display: none;-->
                            <div style="display: none" class="layui-card">
                                <div class="layui-card-header">表单隐藏区域</div>
                                <div class="layui-card-body">
                                    <input type="text" id="imgURL" placeholder="imgURL" autocomplete="off"
                                           class="layui-input">
                                    <input type="text" id="souURL" placeholder="souURL" autocomplete="off"
                                           class="layui-input">
                                    <input type="text" id="pVenName" placeholder="pVenName" autocomplete="off"
                                           class="layui-input" name="vendersInfo">
                                </div>
                            </div>

                            <div class="layui-form-item" style="text-align:center;">
                                <input type="button" class="layui-btn" lay-submit lay-filter="s" value="确认保存">
                                <input type="button" class="layui-btn" lay-submit lay-filter="*" value="保存并提交">
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">商户</label>
                    <div class="layui-input-block" id="suppsID" style="padding-left:10px;">
                        <!--<input lay-filter="checkSPR" type="checkbox" name="checkSPR" title="AAAAA" value="a_code"-->
                        <!--checked="">-->
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>
<!-- 新增 -->
<script>
    layui.config({
        base: 'layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'upload', 'form', 'laydate'], function () {
        var $ = layui.$
            , table = layui.table
            , form = layui.form
            , laydate = layui.laydate;

        laydate.render({
            elem: '#date1' //指定元素
            , type: 'datetime'
        });
        form.render();
        $.ajax({
            url: "http://localhost:8086/getItemList"
            , dataType: 'json'
            , type: 'get'
            , async: false
            , success: function (result) {
                $.each(result.data, function (index, item) {
                    // $('#otype').append(new Option(item.cInvCode));// 下拉菜单里添加元素
                    $(".select").append("<option value=" + item["iTEMNAME"] + ',' + item["iTEMCODE"] + " >" + item["iTEMNAME"] + "</option>");
                    if ($(".select option:contains('" + item["iTEMNAME"] + "')").length > 1) {
                        $(".select option:contains('" + item["iTEMNAME"] + "'):gt(0)").remove();
                    }
                });
                form.render("select");
            }
        });

        //监听下拉选择
        form.on('select(test)', function (data) {
            $("#suppsID").empty();
            console.log(data);
            $.ajax({
                url: "http://localhost:8086/getVenderList"
                , dataType: 'json'
                , type: 'get'
                , async: false
                , success: function (result) {
                    $.each(result.data, function (index, item) {
                        console.log(item);
                        $("#suppsID").append("<input lay-filter='checkSPR' type='checkbox' name='checkSPR' title='" + item["vENDORNAME"] + "' value='" + item["vENDORCODE"] + "'  checked=''>");
                        setpVenName()
                    });
                    form.render();
                }
            });

        });
        /* 监听供应商选择区 */
        form.on('checkbox(checkSPR)', function (data) {
            //console.log(data.elem.value); //复选框value值，也可以通过data.elem.value得到
            console.log(data.elem.title); //复选框value值，也可以通过data.elem.value得到
            setpVenName();
        });

        //表单提交
        // 各种基于事件的操作，下面会有进一步介绍
        form.on('submit(*)', function (data) {
            console.log("表单提交。。。。。。。。。。。。")
            var info = JSON.stringify(data.field);
            var o = JSON.parse(info);
            o.submit = "1";
            var dataInfo = JSON.stringify(o);
            $.ajax({
                type: "post",
                async: true,
                data: dataInfo,
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                url: "http://localhost:8086/insertks",
                success: function (result) {
                    layer.msg(result.message)
                },
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            location.reload();
        });

        form.on('submit(s)', function (data) {
            console.log("表单提交。。。。。。。。。。。。")
            var info = JSON.stringify(data.field);
            var o = JSON.parse(info);
            o.submit = "0";
            var dataInfo = JSON.stringify(o);
            $.ajax({
                type: "post",
                async: true,
                data: dataInfo,
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                url: "http://localhost:8086/insertks",
                success: function (result) {
                    layer.msg(result.message)
                },
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            location.reload();
        });

    });


    ///选中的供应商填入隐藏的表单#pVenName
    function setpVenName() {
        var $ = layui.$;
        var arr = new Array();
        $("input:checkbox[name='checkSPR']:checked").each(function (i) {
            arr[i] = $(this).attr('title') + "|" + $(this).val();
        });
        var arrdata = arr.join(",");
        $('#pVenName').val(arrdata);
    }

</script>
</body>
</html>